<template>
  <div style="background-color: #ffffff;">
    <!-- :before-change="beforeChange" -->
    <HeadNav
      :title="'2025.01.25入库明细'"
      :leftArrow="true"></HeadNav>
    <!-- 周月年 -->
    <div class="content">
      <div class="recordList">
        <div
          class="recordItem"
          v-for="(item,index) in recordList"
          :key="index"
          @click="tocheckedDetail(item,index)">
          <div class="recordItem_bg">
            <div class="recordItemL">
              <div class="recordItemL-left"><img
                :src="item.Icon"
                alt=""></div>
              <div class="recordItemL-right">
                <div class="recordItemL-right-text">{{ item.name }}</div>
                <div
                  class="recordItemL-right-text"
                  style="margin-top: 8px;">{{ item.date }}</div>
              </div>
            </div>
            <div class="recordItemR">
              <div class="recordItemR-left">
                <div class="recordItemR-left-num">共{{ item.allNum }}项产品</div>
                <div
                  class="recordItemR-left-price"
                  style="margin-top: 8px;">合￥{{ item.allPrice }}</div>
              </div>
              <div class="recordItemR-right"><van-icon
                name="arrow-down"
                size="11"
                @click="tocheckedDetail(item,index)" /></div>
            </div>
          </div>
          <div
            class="details_box"
            v-if="current==index && show">
            <div
              class="goods-box"
              v-for="(ele, val) in item.goodsList"
              :key="val"
              :id="val">
              <div class="goods-title">{{ ele.title }}</div>
              <div class="goods-num">
                <div class="selectnum">{{ ele.selectNum }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="recordBottom">
        <div class="recordBottom_item date">
          <div class="recordBottom_item_label">入库时间</div>
          <div class="recordBottom_item_text">2024.01.26 07:02:30 </div>
        </div>
        <div class="recordBottom_item mt19">
          <div class="recordBottom_item_label">入库人</div>
          <div class="recordBottom_item_name">
            <img
              class="mr12"
              src="../../assets/images/name1.png"
              alt="">
            <img
              class="mr12"
              src="../../assets/images/name2.png"
              alt="">
            <img
              class="mr12"
              src="../../assets/images/name3.png"
              alt="">
            <img
              class="mr12"
              src="../../assets/images/name4.png"
              alt="">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
/* eslint-disable */
// import { getApplyCertificationPagePho, getVerifyTypeList } from '@/api/api'
import { getParams } from '@/common/public'
import HeadNav from '@/components/HeadNav'
// import foot from '../foot/foot.vue'
// import moment from 'moment'
// import { mapState } from 'vuex'
// import { Icon } from 'vant'
export default {
    name: 'FullInRecord',
    components: {
        HeadNav,
        // foot
    },
    computed: {
        // ...mapState({
        //     token: (state) => state.applyrecords.token
        // })
    },
    watch: {
        active(newVal) {
            console.log('newVal', newVal)
            if (newVal === 0) {

            } else if (newVal === 0) {

            } else {

            }
        }
    },
    data() {
        return {
            active: 1,
            tabList: [
                {
                    typeId: 0,
                    typeName: '周'
                },
                {
                    typeId: 1,
                    typeName: '月'
                },
                {
                    typeId: 2,
                    typeName: '年'
                }
            ],
            // contentData: [],
            // applyRecords: {},
            // finishedText: '没有更多了',
            // loading: false,
            // finished: false,
            // offset: 0, // 滚动条与底部距离小于 offset 时触发load事件，默认300
            // pageNo: 1, // 当前页码
            // pageSize: 10, // 分页大小
            // total: 0, // 查询总条数

            // params: {
            //     pageNo: 1,
            //     pageSize: 10,
            //     applyType: undefined,
            //     applyStatus: 0,
            //     access_token: sessionStorage.getItem('Authorization'),
            //     tenantId: '002'
            // },
            // paramsStatus: {
            //     access_token: sessionStorage.getItem('Authorization'),
            //     tenantId: '002'
            // },
            
            recordList:[
                {
                    id:1,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name:'运中食堂第一档口',
                    date:'2024.01.26(周日)',
                    allNum:'5',
                    allPrice:'260.00',
                    goodsList: [

                    {
                        id: '101',
                        title: '新东大鸡排  (件/20公斤)',
                        price: '170.00',
                        selectNum: 2,
                    },
                    {
                        id: '101',
                        title: '鱼丸\虾丸（件/10公斤）',
                        price: '115.00',
                        selectNum: 1,
                    },
                    {
                        id: '101',
                        title: '牛肉（斤）',
                        price: '45',
                        selectNum: 1,
                    },
                    {
                        id: '101',
                        title: '烤肠（件/12公斤）',
                        price: '156.00',
                        selectNum: 1,
                    },
                    {
                        id: '101',
                        title: '大鸡排（10袋）',
                        price: '165.00',
                        selectNum: 1,
                    }
                ],
                },
                {
                    id:1,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name:'运中食堂第一档口',
                    date:'2024.01.25(周六)',
                    allNum:'5',
                    allPrice:'795.00'
                },
                {
                    id:1,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name:'运中食堂第一档口',
                    date:'2024.01.26(周五)',
                    allNum:'5',
                    allPrice:'795.00'
                },
                {
                    id:1,
                    Icon: require('../../assets/images/recordIcon.png'),
                    name:'运中食堂第一档口',
                    date:'2024.01.26(周四)',
                    allNum:'5',
                    allPrice:'795.00'
                },
            ],
            show:true,
            current: 0,
        }
    },

//     beforeRouteEnter(to, from, next) {
//     next((vm) => {
//         if(to.query.item!==undefined){
//             vm.localData = JSON.parse(to.query.item)
//         }
//     })
//   },
    mounted() {
    },
    created() {
      
    },
    
    methods: {
        
        toCheck() { },
        // 申报明细
        tocheckedDetail(item,val){
            this.current = val
            this.show = !this.show
        }
    },
    beforeDestroy() {
        console.log('index')
        window.removeEventListener('scroll', this.onLoad, true)
    }
}
</script>

<style lang="less" scoped>
span,
p {
    padding: 0;
    margin: 0;
}

/deep/.van-tab {
    z-index: 200;
    height: 44px;
    //  background:rgb(216, 143, 143);
}

/deep/.van-tabs__wrap .van-tabs__wrap--scrollable {
    position: fixed;
}

/deep/.van-tab--active {
    /* color: rgb(255, 152, 82); */
}

/deep/.van-tabs__line {
    height: 0.6vw;
    background-color: rgb(255, 152, 82);
}

.content {
    overflow: hidden;
    margin-bottom: 10px;
    background: #ffffff;
}
.recordList{
    background: #f9f9f9;
    padding-bottom: 5px;
    margin-top: 60px;
    border-top: 2px solid #f9f9f9;
}
.recordItem{
    background-color: #ffffff;
    padding-bottom: 5px;
    margin-bottom: 5px;

    .recordItem_bg{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
    }

    .recordItemL{
        display: flex;
        align-items: center;
    }

    .recordItemL-left{
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img{
            width: 22px;
            height: 22px;
        }
        
    }
    .recordItemL-right{
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-left: 12px;

        .recordItemL-right-text{
            font-size: 14px;
            color: #000000;
            text-align: left;
        }
    }

    .recordItemR{
        display: flex;
        align-items: center;
        .recordItemR-left{
            .recordItemR-left-num{
                color: #666666;
                font-size: 14px;
            }
            .recordItemR-left-price{
                color: #000000;
                font-size: 14px;
            }
        }


        .recordItemR-right{
            margin-left: 12px;
        }
    }
}
.recordItem:last-child{
    margin-bottom: 0px;
}

.details_box{
    padding: 0px 24px 12px 24px;
}
.goods-box {
    background-color: #ffffff;
    padding: 12px 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    justify-content: space-between;

    .goods-title {
        font-size: 12px;
        line-height: 12px;
        text-align: left;
        color: #000000;
    }

    .goods-num {
        display: flex;
        align-items: center;

        .selectnum {
            font-size: 12px;
            text-align: center;
            color: #000000;
            margin: 0px 3px;
        }
    }

    .plus {
        width: 15px;
        height: 15px;
        background: #047DCB;
        border: none;
    }

    .minus {
        width: 15px;
        height: 15px;
        border: 1px solid #047DCB;
    }

    /deep/.van-button--normal {
        color: #ffffff !important;
        padding: 5px;
    }
}
.btnArea{
    padding: 24px;
    text-align: center;
}

/*清浮动*/
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}



/deep/.van-tabs__wrap {
    touch-action: manipulation;
    border-top: none;
}

/deep/.van-tab {
    border-top: none;
    border-bottom: 1px solid rgba(245, 244, 249, 1);
}


.btnStockIn{
    border: 1px solid #047DCB;
    border-radius: 40px;
    color: #047DCB;
}
// 去逛逛
.loginBtn {
    width: 100%;
    height: 45px;
    border: none;
    background: #047DCB;
    border-radius: 45px;
}

.tips {
    margin-top: 25px;
    font-size: 14px;
    text-align: right;
    color: #000000;
    line-height: 14px;
}
.recordBottom{
    padding: 12px 24px;
    padding-bottom: 44px;
    .recordBottom_item{
        display: flex;
        align-items: center;
        justify-content: space-between;

        .recordBottom_item_label{
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #999999;
        }
        .recordBottom_item_text{
            font-size: 12px;
            line-height: 12px;
            text-align: left;
            color: #000000;
        }
        .recordBottom_item_name{
            display: flex;
            align-items: center;
            img{
                width: 54px;
                height: 30px;
            }
        }

    }
}
.mr12{
    margin-right: 12px;
}
.mt19{
    margin-top: 19px;
}
</style>